<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        table {
            line-height: 40px;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 0 20px;
        }

        table,
        th,
        td {
            border: 0.5px solid #333;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>班级</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>2215</td>
            <td>55</td>
            <td>66</td>
            <td>77</td>
            <td>198</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>2215</td>
            <td>55</td>
            <td>66</td>
            <td>77</td>
            <td>198</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>2215</td>
            <td>55</td>
            <td>66</td>
            <td>77</td>
            <td>198</td>
        </tr>
    </table>
</body>
<script>
    // 需求 -> 通过给定数据动态打印一个表格->动态生成
    // 1. 动态生成之前先写静态页面
    // 2. 根据静态页面动态生成


    var list = [{
        name: "张三",
        class: 2215,
        chinese: 55,
        math: 66,
        english: 77,
    }, {
        name: "李四",
        class: 2215,
        chinese: 92,
        math: 87,
        english: 73,
    }, {
        name: "王五",
        class: 2215,
        chinese: 74,
        math: 82,
        english: 66,
    }];


    document.write("<table>");

    // 问题: 字符串(""  '')不允许在中途换行
    // 解决方法:
    // 1. 不能换行就不换行  => 结构不清晰
    // 2. 改为多字符串拼接  => 结构查分比较麻烦 , 拼接变量也麻烦
    // 3. ES6新增模板字符穿(``)   
    //    模板字符串中可以借助插值语句${} 拼接变量/执行简单的表达式

    // document.write("<tr><th>姓名</th><th>班级</th><th>语文</th><th>数学</th><th>英语</th><th>总分</th></tr>");

    // var str = "姓名";
    // document.write("<tr>" +
    //     "<th>" + str + "</th>" +
    //     "<th>班级</th>" +
    //     "<th>语文</th>" +
    //     "<th>数学</th>" +
    //     "<th>英语</th>" +
    //     "<th>总分</th>" +
    //     "</tr>");

    var str = "姓名";
    document.write(`<tr>
            <th>${str}</th>
            <th>班级</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
            <th>总分</th>
        </tr>`);

    list.forEach(function (item) {
        document.write("<tr>");
        for (var key in item) {
            var val = item[key];
            document.write(`<td>${val}</td>`);
        }
        var sum = item.chinese + item.math + item.english;
        document.write(`<td>${sum}</td>`);

        document.write("</tr>");
    })



    document.write("</table>");

</script>

</html>